<template>
  <div class="sborder">
    <!-- 提交订单 -->
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <span style="font-weight: bold; font-size: 20px">待付款</span>
      <span
        ><van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </span>
    </div>
    <!-- 订单列表 -->
    <div class="orderList">
      <div class="orderList-one" v-for="item in shopdaralist" :key="item.id">
        <img
          :src="item.imgurl"
          style="width: 80px; height: 80px; border-radius: 10px"
        />
        <p style="font-weight: bold">{{ item.title }}</p>
        <div>
          <p style="font-weight: bold">￥{{ item.price }}</p>
          <p style="color: darkgray">数量：x{{ item.acount }}</p>
        </div>
      </div>
      <p
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <span style="font-weight: bold">运费</span>
        <span style="color: darkgray">+￥8.00</span>
      </p>
      <p style="display: flex; justify-content: space-between; margin: 5px 0">
        <span style="font-weight: bold">备注:</span>
        <!-- 可以使用 CellGroup 作为容器 -->
        <van-cell-group inset>
          <van-field v-model="value" placeholder="给商家留言 (85个字以内)" />
        </van-cell-group>
      </p>
      <p style="display: flex; justify-content: space-between">
        <span style="font-weight: bold">合计:</span>
        <span style="color: red; font-weight: bold">￥{{ getShopPrice }}</span>
      </p>
      <div
        style="
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: darkgray;
        "
      >
        支付完成后将尽快为您发货
      </div>
    </div>

    <!-- 确认订单 -->
    <div class="goorder" @click="gofinalorder">确认订单</div>
  </div>
</template>

<script>
import router from "@/router";
import request from "@/utils/request";

export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      // 已经勾选了的商品数据
      shopdaralist: [],
      
    };
  },
  computed: {
    // 计算商品总价格
    getShopPrice() {
      const prcie = this.shopdaralist.reduce(
        (total, item) => (total += Number(item.price) * Number(item.acount)),
        0
      );
      return Number(prcie + 8).toFixed(2);
    },
  },
  async created() {
    // 获取已经勾选了的商品数据
    const result = await request.get("/good/shopdata");
    if (result.data.code === 200) {
      this.shopdaralist = result.data.shopdaralist;
    }
  },
  methods: {
    // 跳转支付页
    async gofinalorder() {
      // 跳转支付页之前对数据库表进行处理
      router.replace('/finalorder')
    },
  },
};
</script> 

<style lang="scss">
main {
  padding-bottom: 0 !important;
}
.sborder {
  padding: 20px;
  padding-bottom: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box; // 开启怪异盒模型
  .orderList {
    width: 100%;
    min-height: 200px;
    margin-top: 20px;
    max-height: 500px;
    overflow: auto;
    // padding: 20px;
    .orderList-one {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
  }
}

// 倒计时样式
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #1989fa;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: red;
  border-radius: 10px;
}

.van-cell-group--inset {
  margin: 0;
  width: 220px;
}
.van-cell {
  padding: 0;
}
.van-field__control {
  padding-left: 65px;
}
.goorder {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: white;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
